<!DOCTYPE html>
<html>
<head>
    <title>视频播放</title>
</head>
<body>
<div>
    <button onclick="playVideo()">播放</button>
    <button onclick="pause()">暂停</button>
    <button onclick="stop()">停止</button>
</div>
<div style="width: 300px;height: 400px">
    <video id="videoPlayer" controls src="/video/play" style="width: 500px;height: 600px" poster="cover.jpg"></video>
</div>

<script>
    let key="player_time"
    var videoPlayer = document.getElementById("videoPlayer");


    videoPlayer.addEventListener('timeupdate', function() {
        setPlayerTime(videoPlayer.currentTime);
        console.log('当前播放时长: ' + videoPlayer.currentTime + '秒');
    });

    videoPlayer.addEventListener('ended', function() {
        console.log('视频播放结束');
    });

    videoPlayer.addEventListener('play', function() {
        let time=getPlayerTime();
        videoPlayer.currentTime = time;
    });

    function playVideo() {
         let time=getPlayerTime();
         videoPlayer.currentTime = time;
         videoPlayer.play();
     }

    function pause() {
        videoPlayer.pause();
    }

    function stop() {
         videoPlayer.currentTime = 0;
         videoPlayer.pause();
     }



     function getPlayerTime() {
         const time_info = { time : 0 };
         const storedValue = localStorage.getItem(key);
         if(storedValue){
             let info=localStorage.getItem(key);
             let data=JSON.parse(info);
             return data.time;
         }else {
             localStorage.setItem(key, JSON.stringify(time_info));
         }
         return time_info.time;
     }

     function setPlayerTime(time) {
         const time_info = { time : time };
         localStorage.setItem(key, JSON.stringify(time_info));
     }
    // var currentRangeStart = 0; // 当前请求的字节范围起始位置
    // var videoPlayer = document.getElementById("videoPlayer");
    // function playVideo() {
    //     videoPlayer.play();
    // }
    // function pause() {
    //     videoPlayer.pause();
    // }
    // function stop() {
    //     videoPlayer.currentTime = 0;
    //     videoPlayer.pause();
    // }
    //
    //
    // let sourceBuffer = null;
    // var supportMediaSource = 'MediaSource' in window;
    // console.log(supportMediaSource + ' 支持 mediaSource');
    // if (supportMediaSource) {
    //     var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    //     // 使用 MediaSource API 和 Blob Urls 创建可播放的视频源
    //     var mediaSource = new MediaSource();
    //     videoPlayer.src = URL.createObjectURL(mediaSource);
    //
    //
    //     mediaSource.addEventListener('sourceopen', event => {
    //         sourceBuffer = mediaSource.addSourceBuffer(mime);
    //         //fetchVideoAndAppend('/video/play', sourceBuffer);
    //         video();
    //     });
    // }
    //
    // function  video() {
    //     fetchAB('/video/play', function (buf) {
    //         sourceBuffer.addEventListener('updateend', function (_) {
    //            // mediaSource.endOfStream();
    //             //   videoPlayer.play();
    //             console.log(mediaSource.readyState); // ended
    //         });
    //         console.log(mediaSource.readyState)
    //         sourceBuffer.appendBuffer(buf);
    //         if(buf.byteLength > 0){
    //             video();
    //         }
    //     });
    // }
    //
    // function fetchAB (url, cb) {
    //     console.log(url);
    //     var xhr = new XMLHttpRequest;
    //     xhr.open('get', url);
    //     xhr.responseType = 'arraybuffer';
    //     xhr.setRequestHeader("Range", "bytes=" + currentRangeStart + "-");
    //     xhr.onload = function () {
    //         cb(xhr.response);
    //     };
    //     xhr.send();
    // };
    //
    //
    // // 通过 Fetch API 获取视频数据并追加到 SourceBuffer
    // function fetchVideoAndAppend(url, sourceBuffer) {
    //     let rangeStart = 0;
    //     const chunkSize = 1024 * 1024; // 每次请求的数据块大小
    //     function fetchChunk() {
    //         const num=rangeStart + chunkSize - 1;
    //         const rangeHeader = 'bytes='+rangeStart+'-'+num;
    //         const headers = new Headers();
    //         headers.set('Range', rangeHeader);
    //
    //         fetch(url, { headers: headers ,method:'GET'})
    //             .then(response => {
    //                 if (response.ok) {
    //                     return response.arrayBuffer();
    //                 } else {
    //                     throw new Error(`请求失败：`);
    //                 }
    //             }).then(arrayBuffer => {
    //                 if (sourceBuffer.updating) {
    //                     // 如果 SourceBuffer 正在更新，继续监听 `updateend` 事件，并在更新完成后再继续请求数据
    //                     sourceBuffer.addEventListener('updateend', fetchChunk);
    //                 } else {
    //                     console.log('数据开始添加');
    //                     // 向 SourceBuffer 中追加数据
    //                     sourceBuffer.appendBuffer(arrayBuffer);
    //                     console.log('数据添加成功');
    //                     rangeStart += chunkSize;
    //
    //                     if (arrayBuffer.byteLength>0) {
    //                         // 如果未达到 Content-Length，继续请求下一块数据
    //                         console.log('请求下一块数据')
    //                         fetchChunk();
    //                     } else {
    //                         console.log('数据加载完成')
    //                         // 数据加载完成，结束 MediaSource
    //                         mediaSource.endOfStream();
    //                     }
    //                 }
    //             })
    //             .catch(error => {
    //                 console.log(JSON.stringify(error))
    //                 console.error('Fetch Error:', error);
    //             });
    //     }
    //     fetchChunk();
    // }


















    // let sourceBuffer=null;
    // var supportMediaSource = 'MediaSource' in window
    // console.log(supportMediaSource+ ' 支持 mediaSource ')
    // if(supportMediaSource) {
    //     var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    //     // 使用 MediaSource API 和 Blob Urls 创建可播放的视频源
    //     var mediaSource = new MediaSource();
    //
    //     videoPlayer.src = URL.createObjectURL(mediaSource);
    //     mediaSource.addEventListener('sourceopen', event => {
    //         sourceBuffer = mediaSource.addSourceBuffer(mime);
    //         // fetch('/video/play', {method: 'GET'})
    //         //     .then(resp => process(resp))
    //         //     .catch(err => console.log(err))
    //
    //         fetch('/video/play',{method: 'GET'})
    //             .then(response => response.arrayBuffer())
    //             .then(arrayBuffer => {
    //                 sourceBuffer.appendBuffer(arrayBuffer);
    //                 console.log('添加完成--》')
    //                 sourceBuffer.addEventListener('updateend', () => {
    //                     mediaSource.endOfStream();
    //                 });
    //             });
    //
    //     });
    //
    // }






    //
    // function sourceOpen () {
    //     if (mediaSource.readyState === 'open') {
    //         console.log('MediaSource 已经打开');
    //         // 进行其他的处理
    //     }
    //     videoPlayer.play();
    //     console.log('事件开始了---》')
    //     // 这个奇怪的字符串后面再解释
    //     var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    //     // 新建一个 sourceBuffer
    //     sourceBuffer = mediaSource.addSourceBuffer(mime);
    //     // 加载一段 chunk，然后 append 到 sourceBuffer 中
    //     fetchBuffer('/video/play')
    // }
    //
    // videoPlayer.src = URL.createObjectURL(mediaSource);



    // // 以二进制格式请求某个url
    // function fetchBuffer (url) {
    //     var xhr = new XMLHttpRequest;
    //     xhr.open('get', url);
    //     xhr.setRequestHeader("Range", "bytes=" + currentRangeStart + "-");
    //     xhr.responseType = 'arraybuffer';
    //     xhr.onload = function () {
    //        let data=xhr.response
    //         if(data.byteLength > 0){
    //             add(data);
    //             console.log('开始添加了'+data.byteLength)
    //             currentRangeStart++;
    //         }
    //     };
    //     xhr.send();
    // }

    // function add(data) {
    //     let status=sourceBuffer.updating;
    //     console.log(data)
    //     console.log(status+' 状态')
    //     // while (status){
    //     //     status=sourceBuffer.updating;
    //     //     console.log('阻塞中----------->')
    //     // }
    //     console.log(sourceBuffer)
    //     console.log('阻塞结束----------->')
    //     sourceBuffer.appendBuffer(data);
    //     fetchBuffer('/video/play')
    // }

    // // 通过 Fetch API 获取视频数据并追加到 SourceBuffer
    // function fetchVideoAndAppend(url, sourceBuffer) {
    //     fetch(url).then(function(response) {
    //         // ReadableStream 默认模式下，会以分块的形式返回数据
    //         const reader = response.body.getReader();
    //
    //         function processStreamSegment({ done, value }) {
    //             if (done) {
    //                 // 当所有数据已经读取完毕，关闭 MediaSource
    //                 mediaSource.endOfStream();
    //                 return;
    //             }
    //             console.log(done)
    //             console.log(value)
    //             // 当有数据可用时，追加数据到 SourceBuffer
    //             sourceBuffer.appendBuffer(value);
    //
    //             // 读取下一块数据
    //             return reader.read().then(processStreamSegment);
    //         }
    //         // 开始处理流数据
    //         return reader.read().then(processStreamSegment);
    //     }).catch(function(error) {
    //             console.error('Fetch Error:', error);
    //     });
    // }
</script>
</body>
</html>
